/*
 * PureButton : BaseButton 纯色按钮(无图)，继承自按钮基类
 */
import QtQuick 2.14
import QtQuick.Layouts 1.14

Item {
    id: root
    /* property 定义开始 */
    // 全局
    property var mobileDevice: ["android", "ios"] // 不带鼠标的设备
    property var pc_otherDevice: ["windows", "linux"] // 带鼠标的设备
    // 目前使用上边方法判断是否带鼠标（不准确）
    property bool hoverEnable: (mobileDevice.indexOf(Qt.platform.os) === -1) ? true : false

    // 按钮
    property bool isEnable: true
    property bool isTransition: true // 是否开启过渡
    property int pureBtnWidth: 120
    property int pureBtnHeight: 40
    property int pureBtnRadius: 8
    property string pureBtnColor: "#FFF"
    property int pureBtnBorderWidth: 1
    property string pureBtnBorderColor: "#999"
    property string pureHoveredColor: "#00FFFFFF"
    property string pureHoveredBorderColor: "#2F42CD"

    // 文字
    property string pureLabelColor: "#222"
    property string pureFontFamily: "Alibaba PuHuiTi"
    property int pureFontPixelSize: 16
    property string pureFontHoveredColor: "#2F42CD"
    property string pureText: "--Pure Default--"

    // 按钮禁用
    property string disabledPureBtnBorderColor: "#D9D9D9"
    property string disabledPureBtnColor: "#F5F5F5"
    property string disabledPureLabelColor: "#BFBFBF"

    // 信号
    signal entered();
    signal exited();
    signal pressed();
    signal released();
    /* property 定义结束 */

    width: pureBtnWidth
    height: pureBtnHeight
    Layout.preferredWidth: pureBtnWidth
    Layout.preferredHeight: pureBtnHeight

    BaseButton {
        id: pureBtn
        isEnable: root.isEnable
        btnWidth: pureBtnWidth
        btnHeight: pureBtnHeight
        btnColor: pureBtnColor
        btnRadius: pureBtnRadius
        btnBorderWidth: pureBtnBorderWidth
        btnBorderColor: pureBtnBorderColor

        btnIsLabelFillWidth: true
        btnIsLabelFillHeight: true
        btnFontFamily: pureFontFamily
        btnFontColor: pureLabelColor
        btnFontPixelSize: pureFontPixelSize
        btnText: pureText

        btnIconWidth: 0
        btnIconHeight: 0

        disabledBtnColor: disabledPureBtnColor
        disabledBtnTextColor: disabledPureLabelColor
        disabledBtnBorderColor: disabledPureBtnBorderColor

        states: [
            State {
                name: "default"
                PropertyChanges {
                    target: pureBtn
                    btnFontColor: pureLabelColor
                    btnBorderColor: pureBtnBorderColor
                    btnColor: pureBtnColor
                }
            },
            State {
                name: "hover"
                PropertyChanges {
                    target: pureBtn
                    btnFontColor: pureFontHoveredColor
                    btnBorderColor: pureHoveredBorderColor
                    btnColor: pureHoveredColor
                }
            }
        ]

        transitions: [
            Transition {
                from: "default"
                to: "hover"
                ColorAnimation {
                    target: pureBtn
                    properties: "btnFontColor, btnBorderColor, btnColor"
                    duration: 30
                }
            },
            Transition {
                from: "hover"
                to: "default"
                ColorAnimation {
                    target: pureBtn
                    properties: "btnFontColor, btnBorderColor, btnColor"
                    duration: 30
                }
            }
        ]

        MouseArea {
            enabled: isEnable
            hoverEnabled: hoverEnable
            anchors.fill: parent
            cursorShape: isEnable ? Qt.PointingHandCursor : Qt.ArrowCursor // 指针变为小手图标
            onEntered: {
                // console.log("悬停")
                if(root.isTransition) pureBtn.state = "hover"
                root.entered()
            }
            onExited: {
                // console.log("离开")
                if(root.isTransition) pureBtn.state = "default"
                root.exited()
            }
            onPressed: function(mouse){
                // console.log("按下")
                if(root.isTransition) pureBtn.state = "hover"
                root.pressed()
            }
            onReleased: {
                // console.log("释放")
                if(root.isTransition) pureBtn.state = "default"
                root.released()
            }
        }
    }
}
